import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
import { useIndexedDB } from '@/composables/useIndexedDB'
import type { Product } from '@/composables/useIndexedDB'
export const useProductStore = defineStore('product', () => {
  // 使用IndexedDB获取商品列表和缓存商品列表
  const { getProductsByPage, cacheProducts, getAllCachedProducts } = useIndexedDB()

  // 响应式状态
  const products = ref<Product[]>([]) // 商品列表
  const page = ref(1) // 当前页码
  const pageSize = ref(25) // 每页商品数量
  const loading = ref(false) // 是否正在加载
  const hasMore = ref(true) // 是否还有更多商品

  // 初始化加载
  async function initProducts() {
    try {
      loading.value = true
      // 先获取所有缓存数据
      const cachedProducts = await getAllCachedProducts()
      if (cachedProducts.length > 0) {
        // 有缓存数据，直接使用
        products.value = cachedProducts
        // 更新页码到缓存数据的最后一页
        page.value = Math.ceil(cachedProducts.length / pageSize.value)
      } else {
        // 无缓存，从服务器获取第一页
        await fetchProducts()
      }
    } catch (error) {
      console.error('初始化失败', error)
    } finally {
      loading.value = false
    }
  }

  // 获取新数据（用于滚动加载）
  async function fetchProducts() {
    // 如果正在加载或没有更多商品，则返回
    if (loading.value || !hasMore.value) return

    try {
      loading.value = true // 设置正在加载
      const response = await fetch('http://localhost:3000/api/products', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json', // 关键：设置正确的请求头
        },
        body: JSON.stringify({
          page: page.value + 1,
          pageSize: pageSize.value,
        }),
      })
      const { data, total } = await response.json()
      // 缓存到 IndexedDB
      await cacheProducts(data)
      // 追加新数据
      products.value = [...products.value, ...data]
      // 更新状态
      page.value++
      hasMore.value = products.value.length < total
    } catch (error) {
      console.error('加载商品列表失败', error)
    } finally {
      loading.value = false // 设置加载完成
    }
  }

  // 重置列表
  function resetList() {
    products.value = [] // 清空商品列表
    page.value = 1
    hasMore.value = true
  }
  // 计算属性：是否为空
  const isEmpty = computed(() => products.value.length === 0)

  return {
    page,
    products,
    loading,
    hasMore,
    isEmpty,
    initProducts,
    fetchProducts,
    resetList,
  }
})
